<template>
  <div class="home">
	  
   <van-swipe class="banner" :autoplay="3000" indicator-color="white">
     <van-swipe-item
       v-for="(item,index) of banner"
       :key="item._id"
     >
       <img :src="item.banner.includes('http') ? item.banner : $baseUrl + item.banner" alt=""/>
       <div class="text-box">
         <h2>{{item.title}}</h2>
         <p>{{item.sub_title}}</p>
		
       </div>
     </van-swipe-item>
   </van-swipe>
   
   <van-grid :border="true" :column-num="3" :gutter="5">
     <van-grid-item  @click="nnn(1)" id="redian">
      <!-- <div id="y"  > -->
      	热点
      <!-- </div> -->
     </van-grid-item>
     <van-grid-item  @click="nnn(2)">
      娱乐
     </van-grid-item>
     <van-grid-item  @click="nnn(3)">
      政治
     </van-grid-item>
	 <van-grid-item  @click="nnn(4)">
	   本地
	 </van-grid-item>
	 <van-grid-item  @click="nnn(5)">
	   国际
	 </van-grid-item>
	 <van-grid-item  @click="nnn(6)">
	   游戏
	 </van-grid-item>
	 
   </van-grid>
   
   
   <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
     <van-list
       v-model="loading"
       :finished="finished"
       finished-text="没有更多了"
	
	   @load="onLoad"
    
	    :offset="400"
     >
	   <!-- <router-link :to="`/detail/${item._id}?collectionName=home`"> -->
       <van-cell v-for="(item,index) of home" :key="item._id">
		    <router-link :to="`/detail/${item._id}?collectionName=home`">
		   <div id="">
		   	 <h2>{{index + 1}}.{{item.title}}</h2>
		   <p>{{item.des}}</p>
		   
		   </div>
		   </router-link>
		  
		    </van-cell> 
			 
			<!-- <button class="an" type="button" @click="onLoad" >{{anniu}}</button> -->
     </van-list>
   </van-pull-refresh>
   
  </div>
</template>

<script>
	// import axios from "../plugins/axios.js"
 export default {
   name:'home',
   props:{},
   data(){
     return {
		 b:"",
		 anniu:"加载更多",
		 page:1,
		  home: this.$route.query.data,
       banner:[],
	    list: [],
	         loading: false,
	         finished: false,
	         refreshing: false,
     }
   },
   components:{},
   mounted(){
     this.$axios({
       url:'/api/news/banner',
       params:{_limit:3}
     }).then(
       res=>{
	    // console.log($baseUrl);
 			this.banner=res.data.data}
     )
   },
   updated(){
   },
   methods:{
	   nnn(a){
		this.loading=false
		this.finished=false
		this.page = 1
		
		   // this.loading = true;
		   if(a==1)this.b="热点";
		   if(a==2)this.b="娱乐";
		   if(a==3)this.b="政治";
		   if(a==4)this.b="本地";
		   
		   if(a==5)this.b="国际";
		   if(a==6)this.b="游戏";
		  
		  
		   // console.log(`/api/news/home/${b}`)
		   this.$axios({
			   // url:`/api/news/home/5e8a0a406a1fc35a2d71f01b/1768`,
		     url:`/api/news/home`,
			 // url:`/api/news/home/5e8a0a406a1fc35a2d71f01b`
			 // method:'get',
		     params:{_limit:10,q:this.b},
			 
			 // tip:"热点"
		   }).then(
		     res=>{
		      // console.log($baseUrl);
		    			this.home=res.data.data
						console.log(res)
						}
		   )
	   },
	       onLoad() {
	      
			console.log("666")
			
			// console.log(1,this.page);
			this.$axios({
			  url:'/api/news/home',
			  params:{_page:++this.page,_limit:10,q:this.b}
			}).then(
			  res=>{
				  
			    // console.log(this.page);
			    this.loading = false;//关闭    加载中状态
			    console.log(res);
				
			    if(res.data.msg === '没有跟多数据' ){
			      // console.log(3);
				  this.anniu="没有数据了哦";
				  
			      this.finished = true;//有底线
			    }else if(res.data.err===0){
			      // console.log(4,res.data.data);
			      this.home = [...this.home,...res.data.data]
			      /* res.data.data.forEach((item,index)=>{
			        this.home.push(item)
			      }) */
			    }
			  }
			)
	       },
	       onRefresh() {
	         // 清空列表数据
	         this.finished = false;
	   
	         // 重新加载数据
	         // 将 loading 设置为 true，表示处于加载状态
	         this.loading = true;
	         this.onLoad();
	       },
 },
 }
</script>

<style scoped>
 .banner{margin-top:0.046rem;position: relative;overflow: hidden; z-index: 1}
 .banner .van-swipe-item{width:6.4rem;float:left;position: relative;}
 .banner .van-swipe-item img{width:100%; display:block;}
 .banner .van-swipe-item .text-box{width:5.8rem; padding:0 0.3rem;height:0.8rem; position:absolute; left:0; bottom:0; color:#fff; background:rgba(0,0,0,0.5);}
 .text-box h2{ font-size:0.25rem; font-weight:normal; margin-top:0.15rem; line-height:0.25rem; margin-bottom:0.15rem; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
 .text-box p{ line-height:100%;}
.an{width:100%;height:0.5rem;font-size:0.35rem; background:"pink"}
 
</style>
